<html>
    <head>
        <title>Suporte $imples Login</title>

        <style type="text/css">
            body{
                background: url("<?php echo DIR_IMG ?>/bg.jpg");
            }

            div#topo{
                background: url(<?php echo DIR_IMG ?>/topo.png) center no-repeat;
                height: 30%;
                width: 100%;
            }
            div#menu{
                text-align: center;
                padding: 5%;
            }
            div#conteudo-topo
            {
                margin-top: 3px;
                width: 100%;
                height: 90px;
                background: url(<?php echo DIR_IMG ?>/conteudoSuperior.png) center no-repeat;
            }
            div#conteudo-central{
                background: url(<?php echo DIR_IMG ?>/conteudoCentro.png) center repeat-y ;
            }

            div#conteudo-baixo{

                background: url(<?php echo DIR_IMG ?>/conteudoBaixo.png) center no-repeat;
            }

            div#rodape{
                padding-top: 8px;
                margin-top: 10px;
                height: 37px;
                background: url(<?php echo DIR_IMG ?>/rodape.png) center no-repeat;
                color: #CCC;
                font: lighter 12px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
                text-align: center;
                font-style: italic;
            }

            div#titulo-conteudo-central{
                height: 38px;
                width: 348px;
                margin-left: 23%;
                background: url(<?php echo DIR_IMG ?>/titulo.png) no-repeat; 

                color: #FFF;
                font: lighter 20px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
                padding-left:3%;
                padding-top: 1px;
                font-style: italic;
            }

            div#layout-content{
                margin-left: 24%;
                padding-top: 15px;
                padding-bottom: 15px;

                width: 720px;
            }

            div#login-topo{
                background: url(<?php echo DIR_IMG ?>/loginSuperior.png) center no-repeat;
                margin-top: 3px;
                width: 100%;
                height: 90px;
                margin-bottom: -22px;
            }

            div#login-centro
            {
                background: url(<?php echo DIR_IMG ?>/loginCentro.png) center repeat-y;

            }
            div#login-titulo{
                background: url(<?php echo DIR_IMG ?>/login.png)  no-repeat;
                width: 128px;
                height: 200px;
                margin-left: 38%;                    
            }
            div#login-conteudo
            {
                margin-left: 95%;
                padding-top: 50px;

            }
            
            div#login-rodape
            {
                background: url(<?php echo DIR_IMG; ?>/loginInferior.png) center no-repeat;
                margin-top: 10px;
                    
            }
        </style>
        <script type="text/javascript" src="<?php echo DIR_JS; ?>/utils.js"></script>
    </head>
    <body>
        <div id="login-topo"></div>
        <div id="login-centro">
            <div id="login-titulo">
                <div id="login-conteudo">
                    <form action="<?php echo base_url(); ?>home/login" method="post" id="form-login-principal">
                        <label>Login</label>
                        <input type="text" name="username" id="username" />
                        <label>Senha</label>
                        <input type="password" name="senha" id="senha" />
                        <input type="hidden" name="enviado" value="1" />
                        <input type="submit" value="Enviar" />
                    </form>
                </div>
            </div>
            <div id="login-rodape">&nbsp;</div>
    </body>
</html>